<script setup lang="ts" name="set_account">
import {
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage } from "element-plus";
import { updatePwd } from "@/api/server_set_account";
import { useStore } from "vuex";
const store = useStore();
const formData = ref<any>({
  userName: "",
  password: "",
});
const passwData = ref<any>({
  newPwd: "",
  newConfirmPwd: "",
});
const dialogVisible = ref(false);
const eyesShow = ref(false);
const openChangePassword = () => {
  dialogVisible.value = true;
};
const confirm = async () => {
  if (
    !(
      passwData.value.newPwd &&
      passwData.value.newPwd == passwData.value.newConfirmPwd
    )
  ) {
    ElMessage.error("两次密码不一致");
    return;
  }
  let { result } = await updatePwd(toRaw(passwData.value));
  console.log(result);
  if (result != "fail") {
    formData.value.password = passwData.value.newPwd;
    window.localStorage.setItem(
      "user",
      JSON.stringify({
        userName: formData.value.userName,
        password: passwData.value.newPwd,
      })
    );
    ElMessage.success("修改成功");
    dialogVisible.value = false;
  }
};
onMounted(() => {
  setTimeout(() => {
    let user = store.state.user;
    formData.value.userName = user.name;
    formData.value.password = user.password;
  }, 1000);
});
</script>

<template>
  <div class="account-page">
    <div class="page-top">
      <h4>账号配置</h4>
    </div>
    <div class="page-table">
      <el-form
        ref="form"
        class="account-form"
        :model="formData"
        label-width="80px"
      >
        <el-form-item label="用户名">
          <el-input v-model="formData.userName" />
        </el-form-item>
        <el-form-item label="密码">
          <div
            class="password-input"
            style="width: 300px; display: inline-block"
          >
            <el-input
              :type="eyesShow ? 'text' : 'password'"
              disabled="disabled"
              v-model="formData.password"
            >
              <template #suffix>
                <svg-icon
                  :icon-class="eyesShow ? 'eyes' : 'eyes2'"
                  @click="eyesShow = !eyesShow"
                  style="width: 1em; height: 1em"
                ></svg-icon>
              </template>
            </el-input>
          </div>
          <el-button @click="openChangePassword" style="margin-left: 20px"
            >修改密码</el-button
          >
        </el-form-item>
      </el-form>
    </div>

   <el-dialog :close-on-click-modal="false"  title="修改秘密" v-model="dialogVisible" width="400px">
      <el-form ref="passw" :model="passwData" label-width="80px">
        <el-form-item label="新密码">
          <div class="password-input">
            <el-input v-model="passwData.newPwd"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="确认密码">
          <div class="password-input">
            <el-input v-model="passwData.newConfirmPwd"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.account-page {
  width: 100%;
  height: 100%;
  .page-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .account-form {
    width: 500px;
    margin: 0 auto;
    .password-input {
      position: relative;
    }
    .password-input .eyes {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 8px;
      top: 9px;
      width: 20px;
      cursor: pointer;
    }
  }
}
</style>
